<template>
	<view class="wrap">
		<view class="tops">
			<view class="left">
				<image :src="vuex_user && vuex_user.headimgurl" mode=""></image>
				<view class="info">
					<view class="name">
						{{vuex_user && vuex_user.nickname}}
					</view>
					<view v-if="vuex_user && vuex_user.mbNo" class="ids">
						会员ID：{{vuex_user && vuex_user.mbNo }}
					</view>
					<view @click="gologin" v-else class="ids">
						会员ID： 未登录
					</view>
				</view>
			</view>
			<view class="right">
				开卡指南
			</view>
		</view>
		<view class="conts">
			<view class="tit">
				我的有机卡（{{allCardTotal}}）
			</view>
			<view class="tab1">
				<view @click="tabs(index)" :class="[cur==index?'active':'']" class="item1" v-for="(item,index) in tab1">
					{{item.name}}
				</view>
				<!-- <view class="item1">
					有机农品（0）
				</view> -->
			</view>
			<view class="inner">

				<!-- <u-sticky> -->
				<!-- 只能有一个根元素 -->
				<view class="sticky">
					<u-tabs h5-nav-height='0px' gutter="20" bar-width="58" bar-height="11" height="90"
						:bar-style="barStyle" active-color="#D39565" inactive-color="#4C4C4C" font-size="26"
						:list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				</view>
				<!-- </u-sticky> -->


				<view v-show="list1.length==0" class="innerTable">
					<!-- <view  class="empty"> -->
					<view v-if="senDate" class="empty">
						<u-empty font-size="26" icon-size="174" class="nodata"
							src="../../../static/aidex/images/nodata.png" text="您还没有有机卡哦~" mode="list"></u-empty>
					</view>

				</view>
				<view v-show="list1.length!=0" class="lists">
					<view class="item" v-for="(item,index) in list1" @click="detail(item)">

						<view v-if="item.plan_state=='未创建'" class="status no">
							{{item.plan_state}}
						</view>
						<view v-else-if="item.plan_state=='已暂停'" class="status doing">
							{{item.plan_state}}
						</view>
						<view v-else-if="item.plan_state=='已启动'" class="status over">
							{{item.plan_state}}
						</view>
						<view class="left">
							<view class="">
								名称：{{item.card_name}}
							</view>
							<view class="">
								卡号：{{item.card_no}}
							</view>
							<view class="">
								配送截止时间：{{item.peison_end_time && item.peison_end_time.split(' ')[0]}}
							</view>
							<view class="">
								可发货：{{item.max_exchange_count}}箱
							</view>
						</view>
						<view class="right">
							<image class="img" :src="item.card_img" mode=""></image>
							<view v-if="item.plan_state=='未创建'" class="dz" @click.stop="addScadule(item)">
								定制发货计划
								<!-- {{item.plan_state=='未创建'}} -->
								<u-icon name="arrow-right" color="#fff" size="20"></u-icon>
							</view>
						</view>
					</view>
					<uni-load-more :status="status"></uni-load-more>

					<!-- 	<u-button @click="add" class="sub" style="margin-top:0px;" type="primary" shape="circle"
						:ripple="true" ripple-bg-color="#909399">
						添加有机卡</u-button> -->

				</view>

				<u-button @click="add" class="sub" type="primary" shape="circle" :ripple="true"
					ripple-bg-color="#909399">
					添加有机卡</u-button>

			</view>
		</view>
		<call />
		<!-- <view class="tell">
			<view class="tellicon">
				<image src="../../../static/aidex/images/tell.png" mode=""></image>
				<view class="word">
					<view class="">
						疑问
					</view>
					<view class="">
						咨询
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>
<script>
	import call from '@/components/call.vue'
	export default {
		components: {
			call
		},
		data() {
			return {
				allCardTotal: 0,
				barStyle: {
					// 'width': '58rpx',
					// 'height': '11rpx',
					'background': '#D39565',
					'borderRadius': '6rpx'
				},

				list: [{
					name: '待使用'
				}, {
					name: '服务中'
				}, {
					name: '已完成',

				}, {
					name: '已作废',

				}],
				current: 0,
				cur: 0,
				tab1: [{
					name: '有机牛奶（0）'
				}, {
					name: '有机农品（0）'
				}],



				total: null, //总共多少条数据
				formData: {
					pageSize: 10, //每页10条数据
					page: 1, //第几页
				},
				status: "more",
				senDate: false,
				list1: [],

				fyname: ['有机牛奶', '有机农品'],
				serverState: ['待使用', '服务中', '已完成', '已作废'], //|||
				code: ''

			};
		},
		onReachBottom() {
			let allTotal = this.formData.page * this.formData.pageSize;
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.status = "loading"; //加载中状态
				this.formData.page++;

				this.getlist();

			} else {
				this.status = "noMore"; //加载完状态
			}
		},

		onLoad() {

		},
		onShow() {
			if (!this.vuex_token2) {
				this.getCode();
			} else {
				this.list1 = [];
				this.formData.page = 1
				this.getlist()
			}

		},
		methods: {
			gologin() {
				uni.redirectTo({
					url: "/pages/sys/login/index"
				})

			},
			getCode() {
				let urlParams = new URLSearchParams(window.location.search)
				this.code = urlParams.get('code'); // 截取code

				console.log(urlParams, this.code, 9999999);
				// debugger
				// return;
				// 如果没有code，则去请求
				if (this.code == null || this.code === "" || this.code == undefined) {
					var wxUrl =
						// `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx2f122e8f84c81159&redirect_uri=http://smyj-lj1.gzmxiong.cn?er=${this.erCode}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
						`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa17d9e21b0a13169&redirect_uri=http://smyj-nk.gzmxiong.cn&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
					window.location.href = wxUrl;
				} else {

					if (this.vuex_user.openid) {
						if (this.vuex_token2) {
							this.list1 = [];
							this.formData.page = 1
							this.getlist()
						} else {
							this.senDate = true
						}
					} else {

						this.$u.api
							.getOpenid({
								code: this.code
							})
							.then((res1) => {
								console.log(res1, 88888);
								this.$u.vuex("vuex_user", res1.info);
								// this.$u.vuex("vuex_openid", res1.openid);
								this.list1 = [];
								this.formData.page = 1
								this.getlist()

							});

					}

				}
			},

			getlist() {
				this.senDate = false;
				this.$u.api
					.myCard({
						page: this.formData.pageSize,
						page: this.formData.page,
						serverState: this.serverState[this.current],
						fyname: this.fyname[this.cur],
					})
					.then((res) => {
						this.senDate = true;
						if (res.code == 0) {
							this.total = res.page.totalCount;
							const newlist = res.page.list;
							this.list1.push(...newlist);
							if (this.list1.length < this.formData.pageSize) {
								this.status = "noMore"; //加载完状态
							}
							this.allCardTotal = res.allCardTotal

							this.tab1 = [{
								name: `有机牛奶（${ res.niunai}）`
							}, {
								name: `有机农品（${ res.yjnp}）`
							}]

						} else {
							console.log("请求数据失败");
						}
					}).catch((error) => {
						console.error("请求过程中发生错误:", error); // 打印错误信息
						this.senDate = true; // 请求失败时设置为false，表示数据未成功加载
					});;
			},
			detail(item) {
				if (item.plan_state != '未创建') {
					uni.navigateTo({
						url: "/pages/sys/msg/detail?cardId=" + item.id
					})
				}

			},
			addScadule(item) {
				this.$u.vuex("vuex_checkedAddr", null);
				uni.navigateTo({
					url: "/pages/sys/msg/add?cardId=" + item.id
				})
			},
			add() {
				uni.switchTab({
					url: "/pages/sys/workbench/index"
				})

			},
			change(index) {
				this.current = index;
				this.list1 = [];
				this.formData.page = 1
				this.getlist()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			tabs(index) {
				this.cur = index
				this.list1 = [];
				this.formData.page = 1
				this.getlist()
			}

		}
	};
</script>
<style lang="scss">
	page {
		background-color: #005850;
	}
</style>
<style lang="scss" scoped>
	.innerTable {
		min-height: 240px;
		padding-top: 120rpx;
	}

	/deep/ .u-sticky {
		top: 0 !important;
	}

	.wrap {
		padding: 47rpx 27rpx;

		.tops {
			margin-bottom: 36rpx;
			height: 182rpx;
			width: 100%;
			background: url("../../../static/aidex/images/mytop.png") no-repeat;
			background-size: cover;
			display: flex;
			justify-content: space-between;

			.left {
				// margin-top: 43rpx;
				margin-left: 28rpx;
				flex: 1;
				display: flex;
				align-items: center;

				image {
					width: 96rpx;
					height: 96rpx;
					background: #FDFDFD;
					border-radius: 50%;
				}

				.info {
					margin-left: 28rpx;
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 42rpx;

					.name {
						margin-bottom: 3rpx;
					}
				}
			}

			.right {
				margin: 19rpx 16rpx 0 0;
				width: 127rpx;
				height: 47rpx;
				background: #C57A3D;
				border-radius: 24rpx;
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.conts {
			background: #F7F8F3;
			border-radius: 14rpx;
			padding: 26rpx 28rpx 51rpx;

			.tit {
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 30rpx;
				color: #4C4C4C;
				line-height: 42rpx;
				padding-bottom: 44rpx;

			}

			.tab1 {
				display: flex;
				padding-bottom: 25rpx;

				.item1 {
					flex: 1;
					text-align: center;
					font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
					font-weight: bold;
					font-size: 30rpx;
					color: #acacac;
					line-height: 42rpx;

					&.active {
						color: #4C4C4C;
					}
				}
			}
		}

		.inner {
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 37rpx 0;
		}

		.empty {
			// margin: 150rpx 0 0;
		}

		.sub {

			height: 88rpx;
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 42rpx;
		}

	}

	.lists {
		padding: 40rpx 30rpx 10rpx;
		min-height: 240px;

		.item {
			position: relative;
			height: 270rpx;
			background: url('../../../static/aidex/images/bg.png') no-repeat;
			background-size: cover;
			border-radius: 14rpx;
			margin-bottom: 18rpx;
			display: flex;
			justify-content: space-between;

			.status {
				position: absolute;
				right: 0;
				padding: 2rpx 10rpx 3rpx;
				background: #7F7F7F;
				border-radius: 18rpx 0rpx 0rpx 18rpx;
				font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
				font-weight: bold;
				font-size: 22rpx;
				color: #FFFFFF;
				line-height: 30rpx;
				top: 25rpx;
				z-index: 5;

				&.doing {
					background: #009585 !important;
				}

				&.over {
					background: #F59A23 !important;
				}
			}

			.left {
				font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
				font-weight: normal;
				font-size: 20rpx;
				color: #FFFFFF;
				padding: 135rpx 0 0 30rpx;
			}

			.right {
				padding-top: 51rpx;
				margin-right: 30rpx;

				.img {
					width: 176rpx;
					height: 154rpx;
				}

				.dz {
					font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
					font-weight: normal;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 27rpx;
					padding: 4rpx 22rpx;
					background: linear-gradient(270deg, #CB9A71 0%, #E6C9A2 100%);
					border-radius: 18rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	// .tell {
	// 	position: fixed;
	// 	z-index: 8;
	// 	bottom: 350rpx;
	// 	right: 81rpx;
	// 	width: 89rpx;
	// 	height: 152rpx;
	// 	background: #005850;
	// 	border-radius: 22rpx 22rpx 45rpx 45rpx;

	// 	.tellicon {
	// 		image {
	// 			width: 44rpx;
	// 			height: 44rpx;
	// 			display: block;
	// 			margin: 22rpx auto 6rpx;
	// 		}

	// 		.word {
	// 			text-align: center;
	// 			font-family: Alibaba-PuHuiTi, Alibaba-PuHuiTi;
	// 			font-weight: normal;
	// 			font-size: 24rpx;
	// 			color: #FFFFFF;
	// 			line-height: 28rpx;
	// 		}

	// 	}
	// }
</style>
